<template>
	<el-card style="height: calc(100vh - 18px) ;">
		<el-row :gutter="20" style="margin-bottom: 20px;">
			<el-col :span="6">
				<el-card>
					<div class="grid-content bg-purple">独生子女数量:{{ isAloneNum }}</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div class="grid-content bg-purple">城市户口学生数量:{{ isCityNum }}</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div class="grid-content bg-purple">已成年学生数量:{{ adultNum }}</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<div class="grid-content bg-purple">已接种新冠疫苗人数:{{ isInoculateNum }}</div>
				</el-card>
			</el-col>
		</el-row>
		<el-card>
			<el-button type="success" @click="add()">新增学生</el-button>
			<el-button type="warning" @click="onDelete('select')">删除选中</el-button>
			<el-button type="danger" @click="onDelete('all')">删除全部</el-button>
			<el-table :data="tableData" border style="width: 100%;margin-top: 20px;" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="name" label="姓名" width="100"></el-table-column>
				<el-table-column prop="age" label="年龄" width="50"></el-table-column>
				<el-table-column prop="isAlone" label="是否独生" width="80">
					<template slot-scope="scope">
						{{ scope.row.isAlone ? '独生子女' : '非独生' }}
					</template>
				</el-table-column>
				<el-table-column prop="account" label="户口" width="60">
					<template slot-scope="scope">
						{{ scope.row.isAlone ? '城市' : '农村' }}
					</template>
				</el-table-column>
				<el-table-column prop="iphone" label="手机" width="120"></el-table-column>
				<el-table-column prop="userId" label="身份证" width="180"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
				<el-table-column prop="isInoculate" label="疫苗" width="120">
					<template slot-scope="scope">
						{{ scope.row.isInoculate ? '已接种' : '未接种' }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<!-- -->
						<el-button type="danger" size="mini" @click="onDelete(scope.row.id)">删除</el-button>
						<el-button size="mini" @click="add(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<MyDialog ref="myDialog" v-if="show" @close="onClose"></MyDialog>
	</el-card>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
import MyDialog from './MyDialog.vue';
export default {
	name: 'hello-page',
	components: {
		MyDialog
	},
	computed: {
		...mapState(['tableData']),
		...mapGetters(['isAloneNum', 'isCityNum', 'isInoculateNum', 'adultNum'])
	},
	data() {
		return {
			show: false,
			selectArr:[]
		};
	},
	methods: {
		...mapMutations(['deleteTableData']),
		add(row) {
			this.show = true;
			this.$nextTick(() => {
				this.$refs.myDialog.open(row);
			});
		},
		onClose() {
			this.show = false;
		},
		handleSelectionChange(val){
			console.log(val);
			this.selectArr = val.map(item=>item.id)
		},
		onDelete(arg) {
			let deleteArr = [];
			let msg = ''
			if (arg === 'select') {
				console.log('删除选中');
				msg='是否删除选中信息'
				deleteArr = this.selectArr
			} else if (arg === 'all') {
				console.log('删除全部');
				msg='是否删除全部信息?'
				deleteArr = this.tableData.map(item=>item.id)
			} else {
				msg = '是否删除该条信息'
				deleteArr = [arg];
			}
			this.$confirm(msg, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					
					
					this.deleteTableData(deleteArr);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		}
	}
};
</script>

<style scoped>
.grid-content {
	padding: 10px 0;
}
</style>
